<template>
    <div class="flex flex-col h-full">
        <div class="flex items-center justify-end mb-[15px]">
            <div class="flex items-center">
                <el-tooltip effect="dark" content="删除" placement="top">
                    <img class="w-4 h-4 cursor-pointer" :src="IconDelete" alt="删除" />
                </el-tooltip>
            </div>
        </div>
        <div class="flex-1 w-full h-full text-center">
            <el-image class="w-[120px] h-[120px]" :src="ImageError" />
            <div class="text-xl mt-2 w-full">
                绘画失败
            </div>
            <el-popover
                placement="top"
                effect="dark"
                trigger="hover"
                :width="300"
                :content="value.fail_reason || '未知错误'"
            >
                <template #reference>
                    <div class="mt-[10px] text-mb text-tx-placeholder line-clamp-2 px-[20px]">
                        错误信息：{{ value.fail_reason || '未知错误' }}
                    </div>
                </template>
            </el-popover>
        </div>

        <el-popover
            placement="bottom"
            effect="dark"
            trigger="hover"
            :width="300"
            :content="value.prompt_in"
        >
            <template #reference>
                <div class="text-tx-regular leading-tight line-clamp-2 mb-2">
                    {{ value.prompt_in }}
                </div>
            </template>
        </el-popover>

        <div class="mt-3">
            <div class="flex items-center justify-between">
                <div class="text-sm text-tx-placeholder">
                    {{ value.create_time }}
                </div>
                <div>
                    <el-tag v-if="value.type === 'text2img'">文生图</el-tag>
                    <el-tag v-if="value.type === 'img2img'">图生图</el-tag>
                    <el-tag v-if="value.type === 'upscale2img'">图放大</el-tag>
                    <el-tag v-if="value.type === 'variation2img'">图变换</el-tag>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import IconDelete from '~/assets/image/draw/icon_delete.png'
import ImageError from '~/assets/image/draw/error.png'

withDefaults(
    defineProps<{
        value: DrawsRecordResponse;
    }>(),
    {}
)
</script>
